<template>
  <div class="all-content">
    <div class="search-box">
      <div class="search">
        <div class="label-input mr-20">
          <div class="label">个体名称:</div>
          <div class="input">
            <el-select v-model="bionIdName" clearable placeholder="请选择" filterable>
              <el-option
                v-for="(item, index) in bionIdList"
                :key="index + 'bionId'"
                :label="item.name"
                :value="item.bionId"
              />
            </el-select>
          </div>
        </div>
        <div class="label-input mr-20">
          <div class="label">耳标:</div>
          <div class="input">
            <el-input v-model="bionIdNumber" clearable placeholder="请输入耳标" />
          </div>
        </div>
        <div class="search ml-20">
          <img src="~@/assets/action-bar-icon/search.png" @click="queryList" />
        </div>
      </div>
    </div>
    <div class="main-content">
      <el-row :gutter="15">
        <el-col :span="5">
          <img src="~@/assets/commont/sheep.png" alt />
        </el-col>
        <el-col :span="19" class="info">
          <el-row class="info-detail" style="padding: 0 15px 0 30px">
            <el-col
              :span="4"
            >个体品种：{{ bionIdInfo.plantVarietyName }}</el-col>
            <el-col :span="4">个体名称：{{ bionIdInfo.name }}</el-col>
            <el-col
              :span="4"
              style="
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
            >个体耳标：{{ bionIdInfo.eagTag }}</el-col>
            <el-col
              :span="4"
            >性别：{{ bionIdInfo.gender === "FEMALE" ? "母" : "公" }}</el-col>
            <el-col :span="4">体重：{{ bionIdInfo.weight }}斤</el-col>
            <el-col :span="4">
              皮毛等级：
              {{ bionIdInfo.clothingHairName }}
            </el-col>
          </el-row>
          <div class="vaccination-detail">
            <center>疫苗接种记录</center>
            <el-table :data="vaccinationTableData" border stripe height="80%">
              <el-table-column type="index" width="40" />
              <el-table-column label="疫苗名称" prop="vaccinumName" />
              <el-table-column label="接种方式" prop="vaccinationWay" />
              <el-table-column label="疫苗剂量" prop="dosage" />
              <el-table-column label="接种时间" prop="vaccinationDate">
                <template slot-scope="scope">
                  {{
                    scope.row.vaccinationDate
                      ? $moment(scope.row.vaccinationDate).format(
                        "YYYY-MM-DD HH:mm:SS"
                      )
                      : ""
                  }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="14" style="position: relative">
          <center>疫病处理记录</center>
          <el-table :data="tableData" border stripe max-height="80%">
            <el-table-column type="index" width="40" />
            <el-table-column label="疫病名称" prop="blightName" />
            <el-table-column label="疫病描述" prop="descrption" />
            <el-table-column label="处理方式" prop="processMode" />
            <el-table-column label="处理结果" prop="result" />
            <el-table-column label="处理时间" prop="processTime">
              <template slot-scope="scope">
                {{
                  scope.row.processTime
                    ? $moment(scope.row.processTime).format(
                      "YYYY-MM-DD HH:mm:SS"
                    )
                    : ""
                }}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="10" height="50%">
          <center>个体体重变化</center>
          <Lineechart
            id="myChart"
            :linebar-data="linebarData"
            max-height="50%"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import req from "@/api/digital-production/health-management/individual-blight-record/index";
import Lineechart from "@/components/Echarts/Linechart/index";
import { mymixin } from "@/utils/mixin";
export default {
  name: "IndividualBiologicalHealth",
  components: {
    // linechart,
    // Pagination,
    Lineechart
  },
  mixins: [mymixin],
  data() {
    return {
      eagtag: "",
      vaccinationTableData: [], // 疫苗接种记录
      tableData: [], // 疫病处理记录
      bionIdName: "",
      bionIdNumber: "",
      bionId: "",
      bionIdList: [], // 个体信息数组
      bionIdInfo: {},
      typeList: [
        // { name: "棉毛型", value: "LINTER" },
        // { name: "沙毛型", value: "ROAN" },
        // { name: "中间型", value: "MIDDLE" }
        { name: "甲", value: "A" },
        { name: "乙", value: "B" },
        { name: "丙", value: "C" }
      ],
      linebarData: {
        // x轴数据
        xAxisdata: [],
        color: "#00b9bd",
        name: "",
        // y轴数据
        seriesData: [
          {
            data: [],
            type: "line",
            name: ""
            // areaStyle: {},
          }
        ]
      }
    };
  },
  created() {
    this.queryBionAll();
  },
  mounted() {
    // this.initChart();
  },
  methods: {
    // 根据耳标查id
    geteagTag() {
      console.log('耳标')
      req.geteagTag(this.bionIdNumber).then((res) => {
        console.log(res.data.bionId)
        this.bionId = res.data.bionId
        console.log('bion已经触发=>', this.bionId)
      })
    },
    // 查询所有个体的信息
    queryBionAll() {
      req
        .queryBionAll({
          breed: "HuSheep"
        })
        .then((res) => {
          if (res.code === 1) {
            let data = res.data || [];
            this.bionIdList = data;
            if (this.bionIdList.length > 0) {
              this.bionIdName = this.bionIdList[0]["bionId"];
              this.queryByBionId();
              this.queryBionById();
              this.queryPageList();
              this.checkWeight();
            } else {
              this.addblankmet();
            }
            this.resetActionBar();
          }
        });
    },
    // 查询所有个体的信息
    queryBionById() {
      console.log(this.bionIdName)
      // console.log(this.bionIdNumber)
      req
        .queryBionById({
          bionId: this.bionIdName || this.bionId
        })
        .then((res) => {
          if (res.code === 1) {
            let data = res.data || {};
            this.bionIdInfo = data;
            let index = this.typeList.findIndex(
              (item) => item.value === this.bionIdInfo.clothingHair
            );
            if (index !== -1) {
              this.bionIdInfo.clothingHairName = this.typeList[index]["name"];
            }
          }
        });
    },
    // 疫苗接种记录
    queryByBionId() {
      if (this.bionIdName || this.bionIdNumber) {
        req
          .queryByCondition({
            bionId: this.bionIdName || this.bionIdNumber,
            eagtag: this.eagtag,
            breed: "HuSheep"
          })
          .then((res) => {
            if (res.code === 1) {
              let data = res.data || [];
              this.vaccinationTableData = data;
            }
          });
      } else {
        this.$message.error("请选择个体！");
      }
    },
    // 疫病处理记录
    queryPageList() {
      if (this.bionIdName || this.bionIdNumber) {
        req
          .queryBlightRecordByCondition({
            bionId: this.bionIdName || this.bionIdNumber,
            eagtag: this.eagtag,
            breed: "HuSheep"
          })
          .then((res) => {
            if (res.code === 1) {
              let data = res.data || [];
              this.tableData = data;
              this.length = data.totalElements;
              /* if (this.tableData.length === 0) {
                this.addblankmet();
              } */
            }
          });
      } else {
        this.$message.error("请选择个体！");
      }
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.queryPageList();
    },
    changeCurrentPage(currentPage) {
      this.currentPage = currentPage;
      this.queryPageList();
    },
    // 查询体重
    checkWeight() {
      this.linebarData.xAxisdata = [];
      this.linebarData.seriesData[0].data;
      // console.log(this.bionId)
      if (this.bionId || this.bionIdNumber) {
        req.queryBionGrowthRecord(1).then((res) => {
          console.log('我是bionid=>', this.bionId)
          if (res.code === 1) {
            let result = res.data || [];
            if (result) {
              result.forEach((item, index) => {
                this.$set(this.linebarData.xAxisdata, index, item.recordTime);
                this.$set(
                  this.linebarData.seriesData[0].data,
                  index,
                  item.weight
                );
              });
            }
          }
        });
      }
    },

    queryList() {
      console.log(this.bionIdName, this.bionId)
      if (this.bionIdName || this.bionId) {
        this.geteagTag()
        this.queryByBionId();
        this.queryPageList();
        this.queryBionById();
        this.checkWeight();
      } else {
        this.$message.error("请选择个体！");
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .el-table {
  overflow: auto;
}
.all-content {
  width: 100%;
  height: 100%;
  .search-box {
    display: flex;
    align-items: center;
    margin-left: 20px;
    .label-input {
      display: flex;
      align-items: center;
      .label {
        width: 100px;
        white-space: nowrap;
      }
    }
    .search {
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        height: 30px;
      }
    }
  }
  .main-content {
    height: calc(100% - 50px);
    margin: 20px 0;
    display: flex;
    flex-direction: column;
    > div {
      width: 100%;
      flex: 1;
      > div {
        height: 100%;
      }
    }
  }
}
.info {
  height: 100%;
  > .vaccination-detail {
    height: 80%;
  }
}
::v-deep.info-detail {
  border: 1px solid rgba(23, 176, 203);
  border-radius: 5px;
  color: rgba(23, 176, 203);
}
::v-deep .el-col {
  min-height: 36px;
  line-height: 36px;
}
::v-deep .el-row {
  padding: 10px;
}
</style>
